import React, { useRef, useCallback } from 'react';

import { Dropdown, Button } from '@douyinfe/semi-ui';
import { IconForward, IconMoreStroked } from '@douyinfe/semi-icons';

interface ChatActionsProps {
  defaultActions?: [React.ReactNode];
  className?: string;
}

const ACTION_KEY = {
    COPY: 'copy',
    LIKE: 'like',
    DISLIKE: 'dislike'
}
/**
 * 自定义聊天框操作按钮
 */
const CustomActions: React.FC<ChatActionsProps> = React.memo((props) => {
    const { defaultActions, className } = props;
    const myRef = useRef<HTMLSpanElement>(null);

    const checkKey = (key: string) => {
        return Object.values(ACTION_KEY).includes(key);
    }

    const actions = (defaultActions || []).filter((action: any) => checkKey(action?.key));

    const getContainer = useCallback(() => {
        if (myRef.current) {
            const element = myRef.current;
            let parentElement = element.parentElement;
            while (parentElement) {
                if (parentElement.classList.contains('semi-chat-chatBox-wrap')) {
                    return parentElement;
                }
                parentElement = parentElement.parentElement;
            }
        }
        return document.body;
    }, []);
    
    return <span 
        className={className}
        ref={myRef}
    >
        {actions}
        {/*<Dropdown
            key="dropdown"
            render={
                <Dropdown.Menu >
                    <Dropdown.Item icon={<IconForward />}>分享</Dropdown.Item>
                </Dropdown.Menu>
            }
            trigger="click"
            position="top"
            getPopupContainer={getContainer}
        >
            <Button 
                className='semi-chat-chatBox-action-btn'
                icon={<IconMoreStroked/>}
                theme='borderless'
                type='tertiary'
            />
        </Dropdown>*/}
    </span>
  });
  
  export default CustomActions;
  